<template>
  <div>
    <ckeditor :editor="editor" v-model="content"></ckeditor>
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import CKEditor from "@ckeditor/ckeditor5-vue";
export default {
  components: {
    CKEditor,
  },
  data() {
    return {
      content: "",
      editor: ClassicEditor,
      config: {
        plugins: [Essentials, Bold, Italic, Paragraph],
        toolbar: ["bold", "italic"],
      },
    };
  },
  mounted() {
    ClassicEditor.create(this.$refs.editor, this.config)
      .then((editor) => {
        this.editor = editor;
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>
<style lang=""></style>
